<template>
	<view class="bg-white" style="height: 100vh;">

		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">入库确认详情</block>
		</cu-custom>

		<view class="tabs">
			<view class="tabItem" v-for="(item, index) in tabList" :key="index" @click="tabSelect(item.id)">
				<text class="itemText" :class="{itemTextCur:index === tabCur}">
					{{ item.title }}
				</text>
			</view>
		</view>
		<!-- 标签页对应的内容 -->
		<block v-if="tabCur === 0">
			<view class="desc">
				<view class="title">物料条码：</view>
				<input placeholder="" name="input" class="input-border" v-model="pdaQueryBarcode" auto-focus
					@input="queryPdaDetail" :focus="materialFocus"></input>
			</view>
			<view class="al-list cu-list">
				<view
					class="message_text bg-white cu-item flex justify-around align-center solid-bottom margin-bottom-sm "
					style="width: 100vw;" v-for="(item,index) in orderList" :key="index" @tap="pdaDetail(item)"
					:class="modalName=='move-box-'+ index?'move-cur':''" @touchstart="ListTouchStart"
					@touchend="ListTouchEnd" :data-target="'move-box-' + index">


					<view class="input-border" style="font-size: 14px;">
						<view class="container">
							<view class="lable-font-style">编号：
							</view>
							<view v-html="item.bussStorageNoticeCode">
							</view>
						</view>
						<view class="container" style="margin-top: 10px;">
							<view class="lable-font-style">名称：
							</view>
							<view v-html="item.materialName">
							</view>
							<view class="lable-font-style">规格：
							</view>
							<view v-html="detail.materialCode">
							</view>
						</view>
						<view class="container">
							<view class="lable-font-style">批次号：
							</view>
							<view v-html="detail.oriWarehouse_dictText">
							</view>
							<view class="lable-font-style">实收数量：
							</view>
							<view v-html="item.goalWarehouse_dictText">
							</view>
						</view>
						<view class="container">
							<view class="lable-font-style">单位：
							</view>
							<view v-html="">
							</view>
							<view class="lable-font-style">库位：
							</view>
							<view v-html="detail.goalLocation_dictText">
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="tabCur === 1">
			<view class="">
				<view>
					<view class="desc">
						<view class="title">物料条码：</view>
						<input placeholder="" name="input" class="input-border" v-model="materialBarcode" auto-focus
							@input="handleMaterialInput" :focus="materialFocus"></input>
					</view>
					<view class="desc">
						<view class="title">库位条码：</view>
						<input placeholder="" name="input" class="input-border" v-model="locationBarcode"
							@input="handleLocationInput" :focus="locationFocus"></input>
					</view>
					<view class="title">入库详情：</view>
					<view class="input-border" style="font-size: 13px;">
						<view class="container">
							<view>编号：
							</view>
							<view v-html="detail.noticeCode">
							</view>
						</view>
						<view class="container">
							<view>产品编码：
							</view>
							<view v-html="detail.materialCode">
							</view>
							<view>批号：
							</view>
							<view v-html="detail.batchNum">
							</view>
						</view>
						<view class="container">
							<view>生产日期：
							</view>
							<view v-html="detail.oriWarehouse_dictText">
							</view>
							<view>货位：
							</view>
							<view v-html="detail.erpLocationName">
							</view>
						</view>
						<view class="container">
							<view>品名：
							</view>
							<view v-html="detail.materialName">
							</view>
							<view>规格：
							</view>
							<view v-html="detail.spec">
							</view>
						</view>
						<view class="container">
							<view>限用日期：
							</view>
							<view v-html="detail.expiryDate">
							</view>
							<view>供应商：
							</view>
							<view v-html="detail.supplierName">
							</view>
						</view>
					</view>
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-blue lg" @click="submitConfirm(detail)">确认</button>
					</view>
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-blue lg" @click="clearBarcode()">清空条码</button>
					</view>
				</view>
			</view>
		</block>




	</view>
</template>

<script>
	import {
		http
	} from '@/common/service/service.js'
	export default {
		data() {
			return {
				NavBarColor: this.NavBarColor,
				erpGoodsId: '',
				materialBarcode: '',
				pdaQueryBarcode: '',
				locationBarcode: '',
				materialFocus: false,
				locationFocus: false,
				detail: {},
				orderDetail:{},
				orderList: [],
				modalName: null,
				goodNumber: null,
				flg: true,
				url: {
					getById: '/base/erpGoods/queryById',
					barcodeScanCheckIn: '/inorder/tslPdaInOrder/barcodeScanCheckIn',
					queryToConfirmList: '/inorder/tslPdaInOrder/queryToConfirmList',
					getMaterialById: '/business/bussStorageNotice/getMaterialById'
				},
				tabCur: 0, // 当前tabs下标
				tabList: [{
						id: 0,
						title: '列表'
					},
					{
						id: 1,
						title: '详情'
					},
				],
				tslPdaInOrder: {},

			}
		},
		// onLoad:function(){
		// 	console.log("this.$Route.query",this.$Route);
		// 	let query = this.$Route.query
		// 	if(query){
		// 		this.annotation = query;
		// 		}
		// },
		onLoad: function(option) {
			const entity = JSON.parse(decodeURIComponent(option.item));
			this.orderDetail = entity
			console.log("订单")
			console.log(this.detail)


		},
		created() {
			console.log("created");
			this.getList()
			// this.getById(this.erpGoodsId);
		},
		methods: {
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			handleMaterialInput(event) {
				if (this.detail.barcode != this.materialBarcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				console.log('Input changed:', this.materialBarcode);
				this.locationFocus = true;
				// 可以在这里添加更多的逻辑
			},
			queryPdaDetail(event) {
				this.orderList.forEach(item => {
					console.log(item.barcode)
					console.log(this.pdaQueryBarcode)

					if (item.barcode === this.pdaQueryBarcode) {
						console.log(item)
						this.pdaDetail(item)
						this.materialBarcode = this.pdaQueryBarcode
					}
				})

			},

			handleMaterialInput(event) {
				if (this.detail.barcode != this.materialBarcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				console.log('Input changed:', this.materialBarcode);
				this.locationFocus = true;
				// 可以在这里添加更多的逻辑
			},
			handleLocationInput(event) {
				if (this.detail.erpLocationCode != this.locationBarcode) {
					this.$tip.error('库位码不匹配')
					return
				}
				console.log('Input changed:', this.locationBarcode);
				// 可以在这里添加更多的逻辑
			},
			clearBarcode() {
				this.materialBarcode = "";
				this.locationBarcode = ""
				this.materialFocus = true;
			},
			getList() {
				this.tslPdaInOrder.topCategoryCode = 4;
				this.tslPdaInOrder.bussStorageNoticeCode = this.orderDetail.code;

				// 根据条码查询移库单数据
				this.$http.post(this.url.queryToConfirmList, this.tslPdaInOrder).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {

						this.orderList = res.data.result;

					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
				// this.$http.get(this.url.getToScanNotice).then(res => {
				// 	console.log(res)
				// 	this.$tip.loaded();
				// 	if (res.data.success) {

				// 		this.orderList = res.data.result;

				// 	}
				// }).catch(() => {
				// 	this.$tip.loaded();
				// 	this.$tip.error('提交失败')
				// });
			},
			pdaDetail(item) {
				console.log("obj" + item)
				console.log(item)
				this.tabCur = 1
				let param = {
					id: item.bussStorageNoticeMaterialId
				}
				// 根据条码查询移库单数据
				console.log(param)
				this.$http.post(this.url.getMaterialById, param).then(res => {
					console.log(res)
					this.$tip.loaded();
					if (res.data.success) {

						this.detail = res.data.result;
						this.detail.tslPdaInOrderId = item.id;

					}
				}).catch(() => {
					this.$tip.loaded();
					this.$tip.error('提交失败')
				});
			},
			submitConfirm(detail) {
				if (detail.barcode != this.materialBarcode) {
					this.$tip.error('物料条码不匹配')
					return
				}
				if (detail.erpLocationCode != this.locationBarcode) {
					this.$tip.error('库位码不匹配')
					console.log(detail.erpLocationCode)
					console.log(this.locationBarcode)
					return
				}
				console.log(detail)
				let tslPdaInOrder = {id:detail.tslPdaInOrderId,bussStorageNoticeMaterialId:detail.id,status:detail.status}
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认进行此操作吗？',
					success: function(res) {
						if (res.confirm) {
							//
							console.log('用户点击确定');

							that.$http.post(that.url.barcodeScanCheckIn, tslPdaInOrder).then(res => {
								console.log(res)
								this.$tip.loaded();
								if (res.data.success) {

									// let entity = res.data.result[0];

								} else {
									uni.navigateBack({
										delta: 1, //返回层数，2则上上页
										success() {
											uni.$emit('barcode', {
												barcode: detail.barcode
											})
										},
									});
									this.$tip.error(res.data.message)
								}
							}).catch(() => {
								this.$tip.loaded();
								this.$tip.error('提交失败')
							});

							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
								success() {

								},
							});

							// 用户点击了确定，执行相应的逻辑
						} else if (res.cancel) {
							console.log('用户点击取消');
							// 用户点击了取消，执行相应的逻辑
						}
					}
				});

				uni.$emit('refreshParentPage', {});
				console.log(detail)
				// this.$http.get(this.url.getById, {
				// 	params: {
				// 		id: this.erpGoodsId
				// 	}
				// }).then(res => {
				// 	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
				// 	this.erpGoods = res.data.result
				// 	console.log("entity", this.erpGoods)
				// 	//设置列表数据
				// 	if (res.data.success) {
				// 		console.log("res", res.data)

				// 	}


				// })
			},

			numberPlus() {
				if (this.flg) {
					this.goodNumber++
					this.flg = false
				} else {
					this.goodNumber--
					if (this.goodNumber == 0) {
						this.goodNumber = null
					}
					this.flg = true
				}
			},
			tabSelect(index) {
				if (this.tabCur === index) return
				this.tabCur = index
			}
		}
	}
</script>

<style>
	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 80%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.input-border {
		border: 1px solid #ccc;
		/* 设置边框为灰色 */
		border-radius: 4px;
		/* 设置圆角 */
		padding: 2px 5px;
		/* 内边距 */
		margin: 4px;
		/* 外边距 */
		width: 98%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.cu-card.article>.cu-item .content .desc {
		flex: 0.2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.border-class {
		border: 1px solid #000000;
		border-radius: 5px;
	}

	.container {
		display: grid;
		grid-template-columns: 1.3fr 2fr 1.3fr 2fr;
		/* 将容器分为两列，每列宽度相等 */
	}

	.left-view {
		background-color: red;
	}

	.right-view {
		background-color: blue;
	}

	.topTabBar {
		width: 100%;
		height: 280upx;
		display: flex;
		justify-content: space-around;
		position: fixed;
		top: 45px;
		background-color: #f8f8f8;
	}

	.grid {
		width: 20%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #444;
		font-size: 28upx;
	}

	.text {
		height: 76upx;
		display: flex;
		align-items: center;
	}

	.active {
		color: #0a79ff;
		border-bottom: solid 4upx #0a79ff;
	}

	.content {
		width: 710rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		font-size: 36rpx;
		background: #ff0000;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.tabs {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 32rpx;
		background-color: #FFF;
		color: #A9A9A9;
	}

	.tabItem {
		width: 250rpx;
		height: 114rpx;
		line-height: 100rpx;
		color: #ffA9A9;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 30rpx;
	}

	.itemText {
		color: #0000ff;
	}

	.itemTextCur {
		color: #F62D5C;
	}
</style>